<!--
 * @Date: 2024-10-23 09:08:12
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-10-23 11:35:45
 * @Description: 选择项目弹窗
-->
<template>
  <vxe-modal
    v-if="dialogState.visible"
    ref="dialogRef"
    :="dialogAttrs"
    v-model="dialogState.visible"
    @close="handleCancel"
  >
    <ProjSelectTable ref="compsRef" :="compsAttrs" />
    <template #footer>
      <el-button type="primary" @click="handleConfirm()">确定</el-button>
      <el-button @click="handleCancel()">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import ProjSelectTable from './tables/ProjSelectTable.vue'

const props = defineProps({
  // 类型
  type: { type: String, default: 'add' },
  // 弹窗名称
  title: { type: String, default: '添加项目' },
  // 是否可见
  visible: { type: Boolean, default: false },
  // 额外参数
  extParams: { type: Object, default: () => ({})},
  // 是否显示底部
  showFooter: { type: Boolean, default: true },
  // 取消方法
  onCancel: { type: Function },
  // 确认方法
  onConfirm: { type: Function },
  // 销毁方法
  onDestory: { type: Function },
})

// 弹窗的Ref
const dialogRef = ref(null)
// 弹窗属性配置
const dialogAttrs = reactive({
  title: props.title,
  width: '85%',
  height: '80%',
  resize: true,
  zIndex: 1002,
  transfer: true,
  showZoom: true,
  minWidth: 460,
  minHeight: 320,
  fullscreen: false,
  showFooter: props.showFooter,
  maskClosable: false,
  destroyOnClose: true,
})
// 弹窗数据集
const dialogState = reactive({
  visible: props.visible
})

const compsRef = ref()
// 组件的配置信息
const compsAttrs = computed(() => {
  const result = {
    ...props.extParams
  }
  return result
})
const handleCancel = () => {
  if (props.onCancel) { props.onCancel() }
  handleDestory()
}
const handleConfirm = async () => {
  const selRow = await compsRef.value.getSelectedRow()
  if (!selRow) return
  if (props.onConfirm) { props.onConfirm(selRow) }
  handleDestory()
}
const handleDestory = () => {
  if (props.onDestory) { props.onDestory() }
}

</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
.proj-apply-dialog {
  .vxe-modal--box,
	.vxe-modal--header {
		border-radius: unset;
	}
	&.type--modal {
		.vxe-modal--body {
			// overflow: unset;
			.vxe-modal--content {
				// overflow: unset;
				padding: 0;
			}
		}
	}
}
</style>
